<template>
  <div class="wx-view-list" :style="{ '--theme': $store.getters.themeColor }">
    <div  class="view">
      <div :class="['content', {'active-view':hasActive}]"  @click="selectItem()">
        <p class="view-title">{{viewDataSource.alarmBody}}</p>
        <div class="view-body flex flex-center">
          <el-col :span="10" class="view-body-left">
            <el-tooltip placement="right"
                        effect="light"
                        :visible-arrow="false"
                        :enterable="false"
                        popper-class="el-popover-img-pop"
                        :offset="(alarmIndex + 1) % 3 === 0 ? 150 : -150">
              <el-image fit="cover"
                        style="height: 100%; width: 100%;border-radius:2px"
                        @click.stop="toDetail"
                        @contextmenu.prevent.native="disableContextmenu"
                        :src="imgUrl">
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
              <div slot="content">
                <el-image @contextmenu.prevent.native="disableContextmenu" fit="cover" class="table-img" :src="imgUrl">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
              </div>
          </el-tooltip>
            <span class="img-tip">卫星告警</span>
          </el-col>
          <el-col :offset="1" :span="13" class="view-body-right flex flex-column flex-between">
            <div class="flex flex-center">
              <el-tooltip placement="top" popper-class="event-tooltip" >
                <div slot="content" class="tooltip-content">告警类型</div>
                <i class="iconfont icon icon-fenlei-leixing"></i>
              </el-tooltip>
              <div class="value" :title="viewDataSource.warningTypeName">{{ viewDataSource.warningTypeName }}</div>
            </div>
            <div class="flex flex-center">
              <el-tooltip placement="top" popper-class="event-tooltip" >
                <div slot="content" class="tooltip-content">推送客户数</div>
                <i class="iconfont icon icon-tuisongkehushu"></i>
              </el-tooltip>
              <span>推送客户数：{{viewDataSource.pushNum}}</span>
            </div>
            <div class="flex flex-center set-width">
              <el-tooltip placement="top" popper-class="event-tooltip" >
                <div slot="content" class="tooltip-content">事发地点</div>
                <i class="icon el-icon-location-outline icon-dingwei2"></i>
              </el-tooltip>
              <span :title="viewDataSource.address" class="address-text">{{viewDataSource.address}}</span>
            </div>
          </el-col>
        </div>
        <div class="view-code">
          <el-tooltip placement="top" popper-class="event-tooltip" >
            <div slot="content" class="tooltip-content">卫星告警编号</div>
            <i class="el-tooltip iconfont icon-bianma1"></i>
          </el-tooltip>
          <span class="code" :title="viewDataSource.alarmCode" @click.stop="toDetail">{{viewDataSource.alarmCode}}</span>
        </div>
        <div class="line"></div>
        <div class="view-footer flex flex-center flex-between">
          <div class="time">
            <el-tooltip placement="top" popper-class="event-tooltip" >
              <div slot="content" class="tooltip-content">告警时间</div>
              <i class="el-tooltip iconfont icon-shijian"></i>
            </el-tooltip>
            <span>{{viewDataSource.alarmTime}}</span>
          </div>
          <div class="time time-right">
            <el-tooltip placement="top" popper-class="event-tooltip" >
              <div slot="content" class="tooltip-content">接收时间</div>
              <i class="el-tooltip iconfont icon-shizhong"></i>
            </el-tooltip>
            <span>{{viewDataSource.pushTime}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import demoImg from "@/assets/image/demoImg.png";
export default {
  name: "wxAlarmViewList",
  props: {
    viewDataSource: {
      type: Object,
      default: ()=>{}
    },
    selectList:{
      type:Array,
      default:()=>[]
    },
    alarmIndex:{
      type:Number,
      default:0
    }
  },
  data(){
    return {

    }
  },
  computed:{
    imgUrl() {
      // 默认展示专题图
      let url = '';
      if (JSON.parse(this.viewDataSource.extendField)?.relativePathThem) {
        url = JSON.parse(this.viewDataSource.extendField).relativePathThem;
      } else {
        url = demoImg;
      }
      return url;
    },
    hasActive() {
      return !!this.selectList.find(
        (item) => item.alarmCode === this.viewDataSource.alarmCode
      );
    },
  },
  methods:{
    /**
     * 选中事件
     * @param item 事件信息
     */
    selectItem(){
      let tempList = [];
      if(this.hasActive) {
        tempList = this.selectList.filter(j=>j.alarmCode !== this.viewDataSource.alarmCode)
      }else {
        tempList = [...this.selectList,this.viewDataSource];
      }
      this.$emit('update:selectList',tempList);
    },
    toDetail(){
      this.$emit('toDetail')
    },
    disableContextmenu(){
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
$theme: var(--theme);
.wx-view-list {
  width: 100%;
  height: fit-content;
}
.table-img {
  margin: 0px -40px 0px -40px;
  width: 500px;
  height: 282px;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
  border-radius: 2px;
}
.view {
  height: 285px;
  padding: 0 10px;
  cursor: pointer;
  .content {
    border-radius: 5px;
    border: 1px solid #D6D6D6;
    height: 100%;
    padding: 24px;
    .view-title {
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
    }
    .view-body {
      margin-top: 24px;
      display: flex;
      align-items: center;
      height: 105px;
      .view-body-left {
        position: relative;
        height: 100%;
        flex-shrink:0;
      }
      .set-width {
        width: 100%;
        max-width: 100%;
      }
      .view-body-right {
        margin-left: 20px;
        color: #666666 ;
        font-size: 14px;
        height: 100%;
        .address-icon {
          min-width: 14px;
        }
        .address-text {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .icon {
          color: #A7AEB4;
          margin-right: 8px;
        }
        .tag2 {
          background: #e3bd11;
          color: #fff;
        }
        .value {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .tag1 {
          background: $theme;
          color: #fff;
          white-space: nowrap;
          display: inline-block;
          border-radius: 2px;
          padding: 0 6px;
          margin-left: 5px;
          text-align: center;
          vertical-align: middle;
          line-height: 20px;
          width: 38px;

        }
      }

    }

    .view-code {
      padding: 15px 0;
      color: #A5ACB2 ;
      display: flex;
      align-items: center;
      .code {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-left: 5px;
      }
      span {
        color: rgb(24, 144, 255);
      }
    }
    .line {
      height: 1px;
      border: 1px dashed #b4bdc5;
    }
    .view-footer {
      padding-top: 20px;
      .time {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        flex: 1;
      }
      .time-right {
        text-align: right;
      }
    }

  }
}
.active-view {
  border-color: $theme !important;
  box-shadow: 0px 10px 12px 3px rgba(187,187,187,0.55);
}
.flex {
  display: flex;
}
.flex-between {
  justify-content: space-between;
}
.flex-column {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-center {
  align-items: center;
}
.img-tip {
  padding: 2px 12px 2px 12px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 20px;
  background: rgba(65,117,5,0.58);
  border-radius: 0px 3px 3px 0px;
  position: absolute;
  bottom: 10px;
  left: 0px;
}

</style>
<style lang="scss">
.el-tooltip__popper.el-popover-img-pop.is-light {
  height: 350px;
  background: transparent;
  border: none;

  .leftpic {
    height: 100px !important;
  }
}
</style>
